/**
 * Markdown 思维导图组件
 * 
 * 使用方式（在 Markdown 中）：
 * ```mindmap
 * # 主题
 * ## 分支 1
 * - 子节点 1.1
 * - 子节点 1.2
 * ## 分支 2
 * - 子节点 2.1
 * ```
 */

import React, { useEffect, useRef } from 'react';
import { Transformer } from 'markmap-lib';
import { Markmap, loadCSS, loadJS } from 'markmap-view';
import { Toolbar } from 'markmap-toolbar';
import 'markmap-toolbar/dist/style.css';

/**
 * 思维导图组件
 * @param {Object} props
 * @param {string} props.content - Markdown 内容
 */
export const MarkdownMindmap = ({ content = '' }) => {
    const svgRef = useRef(null);
    const mmRef = useRef(null);

    useEffect(() => {
        if (!svgRef.current || !content) return;

        try {
            // 创建转换器
            const transformer = new Transformer();

            // 转换 Markdown 为思维导图数据
            const { root, features } = transformer.transform(content);

            // 加载需要的 CSS 和 JS（用于渲染）
            const { styles, scripts } = transformer.getUsedAssets(features);
            if (styles) loadCSS(styles);
            if (scripts) loadJS(scripts);

            // 创建或更新思维导图
            if (!mmRef.current) {
                // 首次创建
                mmRef.current = Markmap.create(svgRef.current);
            }

            // 渲染数据
            mmRef.current.setData(root);
            mmRef.current.fit();

            // 添加工具栏（缩放、适应屏幕等）
            const toolbar = new Toolbar();
            toolbar.attach(mmRef.current);
            toolbar.setItems(['zoomIn', 'zoomOut', 'fit']);

        } catch (error) {
            console.error('思维导图渲染失败:', error);
        }

        // 清理函数
        return () => {
            if (mmRef.current) {
                mmRef.current.destroy();
                mmRef.current = null;
            }
        };
    }, [content]);

    return (
        <div className="my-6 border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden not-prose">
            {/* 标题栏 */}
            <div className="bg-gray-50 dark:bg-gray-800 px-4 py-2 border-b border-gray-200 dark:border-gray-700">
                <div className="flex items-center gap-2">
                    <svg className="size-4 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                        <circle cx="12" cy="12" r="2" />
                        <circle cx="6" cy="6" r="2" />
                        <circle cx="18" cy="6" r="2" />
                        <circle cx="6" cy="18" r="2" />
                        <circle cx="18" cy="18" r="2" />
                        <line x1="12" y1="10" x2="6" y2="8" />
                        <line x1="12" y1="10" x2="18" y2="8" />
                        <line x1="12" y1="14" x2="6" y2="16" />
                        <line x1="12" y1="14" x2="18" y2="16" />
                    </svg>
                    <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
                        思维导图
                    </span>
                </div>
            </div>

            {/* SVG 容器 */}
            <div className="bg-white dark:bg-gray-900 p-4">
                <svg
                    ref={svgRef}
                    className="w-full h-[500px] rounded-lg"
                    style={{ backgroundColor: 'transparent' }}
                />
            </div>

            {/* 使用提示 */}
            <div className="bg-gray-50 dark:bg-gray-800 px-4 py-2 border-t border-gray-200 dark:border-gray-700">
                <p className="text-xs text-gray-500 dark:text-gray-400">
                    💡 提示：可拖拽移动、滚轮缩放、点击展开/折叠节点
                </p>
            </div>
        </div>
    );
};

// 设置 displayName 帮助父组件识别
MarkdownMindmap.displayName = 'MarkdownMindmap';

export default MarkdownMindmap;

